<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设备工况</title>
    <style>
        .nicescroll-rails.nicescroll-rails-vr{
            background: transparent!important;
            left:2.715rem!important;
        }
    </style>
</head>
<body>
    <div class="right-top-tools" style="height:50px">
        <div class="zd-tab clearfix" style="height:50px">
           <span style="color:#3c619e;font-weight: bold">设备工况  </span>
        </div>
    </div>
	<div class="right-top-tools">
		<div class="data-class-btns clearfix">
			<div id="tbl_surface_move_device_data" class="class-btn active" station_type="14">
				<div class="icon icon-bg wy">
					<div class="pic"></div>
				</div>
				位移监测
			</div>
			<div id="tbl_deep_move_device_data" class="class-btn" station_type="5">
				<div class="icon icon-bg xz">
					<div class="pic"></div>
				</div>
				深度位移
			</div>
			<div id="tbl_rain_device_data" class="class-btn" station_type="1">
				<div class="icon icon-bg yl">
					<div class="pic"></div>
				</div>
				雨量监测
			</div>
			<div id="tbl_water_device_data" class="class-btn" station_type="2">
				<div class="icon icon-bg ot">
					<div class="pic"></div>
				</div>
				含水率监测
			</div>
			<div id="tbl_pressure_device_data" class="class-btn" station_type="20">
                <div class="icon icon-bg sy">
                    <div class="pic"></div>
                </div>
 				渗压监测
            </div>
            <div id="tbl_flow_device_data" class="class-btn" station_type="200">
                <div class="icon icon-bg ll">
                    <div class="pic"></div>
                </div>
				流量监测
            </div>
		</div>
		<div class="zd-tab clearfix z1">
			<div id="devices_tabs">
			</div>
			<div class="draptop"></div>
		</div>
		<div class="right-top-tools-open"></div>														
	</div>
    <div class="table-container" style="margin-top:0px">
        <div class="table-tool disno">
	        <div id="reportrange" class="pull-left">
	            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
	            <span></span> <b class="caret"></b>
	        </div>
	        <div id="search_data" class="search-at">查询</div>
    	</div>
        <div class="table-tab clearfix">
            <div class="tab current" id="latest">设备工况数据</div>
        </div>
        <table id="device_table" class="display" cellspacing="0" width="100%" style="text-align:center">
            <thead id="device_table_header">
            	<tr>
                    <th style="text-align:center">设备名称</th>
                    <th style="text-align:center">设备编号</th>
                    <th style="text-align:center">设备工况</th>
                    <th style="text-align:center">更新时间</th>
                </tr>
            </thead>
        </table>
   </div>
   <script type="text/javascript">
	var dataTimeType = "latest";//最新数据
	var Dtable_project = null;
	var dataType = null;
	var station_type = null;
	var device = null;
	var search_start_time = null;
	var search_end_time = null;
	
    $(".class-btn").click(function(){
    	dataType = this.id;
    	$(".class-btn").removeClass("active");
        $(this).addClass("active");
        device = null;
        station_type = $(this).attr("station_type");
        loadDevices();
    });
    function devices_tabClick( btn ){
		$(".device_tab").removeClass("device_tab_clicked");
        $("#"+btn.id).addClass("device_tab_clicked");
    	device = btn.id;
        showDataTable()
    }
    $(".table-tab").on("click",".tab",function(){
    	dataTimeType = this.id;
        $(this).addClass("current").siblings(".tab").removeClass("current");
        if($(this).hasClass("ls-data")){
            $(".table-tool").show();
        }else{
            $(".table-tool").hide();
        }
        showDataTable();
    });
    var theight=0;
    $(".draptop").on("click",function(){
        theight=$(".right-top-tools")[0].clientHeight;
        $(".right-top-tools").animate({'height':"0px"});
        setTimeout(function(){
            $(".right-top-tools-open").show();
        },200);
    });	
	function search(){
		Dtable_project.ajax.reload()
	}
	function likeFilterReset(){
		$("#likeFilter").val("")
	}	
	//获取数据展示的列名
	function getDatatableColumns(){
		var columnString = "name,no,status,update_time";
		var columnList = [];//显示列对应的json字段       
        var colArr = columnString.split(',');
        for (var i = 0; i < colArr.length; i++) {
            var obj = {};
            obj['data'] = colArr[i];
            columnList.push(obj);
        }
        return columnList;
	}
	
	//组织一个datatables的setting对象
	function getDatatableSettings(){
		var _pagesize = 10;
    	var _url = "../../tbl_device/list";
		var setting =  {
		    "info":0,
		    "pageLength": _pagesize,
		    "lengthChange":false,
		    "searching":false,
		    "ordering":true,
		    "processing": true,
		    "serverSide": true,
		    "destroy":true,
		    "order": [[ 3, "desc" ]],
		    "ajax": { 
		     	url: _url,  
		        type: "post",
		        contentType: "application/json",
		        dataType: "json",
		        data: function( data ) {
		            if( data.order && data.order.length > 0 && data.columns && data.columns.length > 0 ){
		            	data.orderIndex = data.order[0].column;
		            	if( data.columns.length >= ( data.orderIndex + 1 )){
		            		data.orderColName = data.columns[data.orderIndex].data;
		            	}
		            	data.orderType = data.order[0].dir;
		            }
		            //模糊查询
		            if( $("#likeFilter").val() != null && $("#likeFilter").val() != "" ){
		            	data.likeFilter = $("#likeFilter").val();
		            }
		            
		            if( search_start_time == null ){
		            	search_start_time = start.format('YYYY-MM-DD') + " 00:00:00";
		            }
		            if( search_end_time == null ){
		            	search_end_time = end.format('YYYY-MM-DD') + " 23:59:59";
		            }
		            
		            data.search_start_time = search_start_time;
			        data.search_end_time = search_end_time;
		            data.no = device;
		            data.page = data.start/data.length + 1;
		            data.pagesize = _pagesize;
		            data.deviceType = station_type;
		            data.tree_level = global.device_data_tree_selected_level;
		            data.tree_id = global.device_data_tree_selected_id;
		            return JSON.stringify(data);
		        },
		        dataSrc: function ( json ) {
		           	$(json.data).each(function(){
		           		if( this.update_time ){
		           			this.update_time = new Date(this.update_time).format("yyyy-MM-dd hh:mm:ss");
		           		}
		           		if( this.create_time ){
		           			this.create_time = new Date(this.create_time).format("yyyy-MM-dd hh:mm:ss");
		           		}
		           		if( this.status == 1 ){
		           			this.status = "<font style='color:green;font-weight:bold'>正常</font>";
		           		}else{
		           			this.status = "<font style='color:red;font-weight:bold'>异常</font>";
		           		}
		            });
		            json.recordsTotal = json.pagination.totalRecord;
		            json.recordsFiltered = json.pagination.totalRecord;
		            return json.data;
		        }
		    },
		    "columns": getDatatableColumns( dataType ),
		    "language": {
		        "paginate": {
		            "next": "下一页",
		            "previous": "上一页",
		        }
		    }
		} 
		return setting;
	}
	
	//加载一个数据表格
	function showDataTable(){
		Dtable_station_device = $('#device_table').DataTable( getDatatableSettings() );
	}
	
	function loadDevices( selected_station_id ){
		var param = {};
		param.station_type = station_type;
		param.tree_level = global.device_data_tree_selected_level;
		param.tree_id = global.device_data_tree_selected_id;
		var json_data = JSON.stringify(param);
		var url = "../../tbl_station_info/list";
		$.ajax({
			url: url,
			type : 'post',
		    async : false,
			data: json_data,
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function( json ) {
				var html="";
				if( json.data ){
					$(json.data).each(function(){
						if( selected_station_id != null && this.station_id == selected_station_id ){
							html += "<div class=\"device_tab device_tab_clicked\" onclick=\"devices_tabClick(this)\" id=\""+this.station_id+"\">"+this.station_name+"</div>";
					    	device = this.station_id;
						}else{
							html += "<div class=\"device_tab\" onclick=\"devices_tabClick(this)\" id=\""+this.station_id+"\">"+this.station_name+"</div>";
						}
					});
					html += "<div class=\"draptop\"></div>"; 
					$("#devices_tabs").html(html);
				}
				showDataTable();
			}
		});
	}
	
	var cell_index = null;
	var config_id = null;
	var old_value = null;
	var m_devicename = null;
	var m_option_name = null;
	
    $(document).ready(function(){
    	$(".table-tool").show();
    	dataType = $(".class-btn.active").attr("id");
    	station_type = $(".class-btn.active").attr("station_type");

    	if( global.search_station_type != null ){
        	$(".class-btn").each(function(){
        		if( $(this).attr("station_type") == global.search_station_type ){
        			dataType = this.id;
        	    	$(".class-btn").removeClass("active");
        	        $(this).addClass("active");
        	        station_type = $(this).attr("station_type");
        		}
        	});
        }
    	
    	//加载第一种类型数据所涉及到的设备信息
    	loadDevices( global.search_station_id );
    	
	    $('#device_table tbody').on( 'dblclick', 'td', function () {
	    	if( this.cellIndex < 2 ){
	    		return;
	    	}else{
	    		cell_index = this.cellIndex;
	    		config_id = Dtable_station_device.row( this ).data()['id'];
	    		old_value = this.innerText;
	    		m_devicename = Dtable_station_device.row( this ).data()['devicename'];
	    		m_option_name = Dtable_station_device.row( this ).data()['option_name'];
	    		global.showModal("修改设备预警配置", "device/device_edit.html");
	    	}
        } );
	    
	    $('#device_table tbody').on( 'mouseover', 'td', function () {
	    	if( this.cellIndex > 1 ){
	    		$(this).css("cursor","pointer");
	    	}
        } );
	    
	    $("#search_data").click(function(){
	    	showDataTable();
	    });
    });
    
  //rangedate
    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
    	search_start_time = start.format('YYYY-MM-DD') + " 00:00:00";
    	search_end_time = end.format('YYYY-MM-DD') + " 23:59:59";
        $('#reportrange span').html( start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD') );
    }
    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
            '今天': [moment(), moment()],
            '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            '最近一周': [moment().subtract(6, 'days'), moment()],
            '最近30天': [moment().subtract(29, 'days'), moment()],
            '当月': [moment().startOf('month'), moment().endOf('month')],
            '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        locale : {
            applyLabel : '确定',
            cancelLabel : '取消',
            fromLabel : '起始时间',
            toLabel : '结束时间',
            customRangeLabel : '自定义',
            daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
            monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                '七月', '八月', '九月', '十月', '十一月', '十二月' ],
            firstDay : 1
        }
    }, cb );
    cb( start, end );
</script>
</body>
</html>